<template>
  <div class="contain">
    <Hand title="商品详情" :left="true" :iconbool="false" @back="fn">
      <p>
        <van-icon class="icon" @click="goCar" name="cart" color="white" />
      </p>
    </Hand>
    <div class="bottom">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in detailStore.images.goodsNormsList" :key="image" class="swiper">
          <img :src="image.photo" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
      <p v-for="item in detailStore.images.goodDetail" :key="item.goodsid">{{ item.note }}</p>
      <p v-for="item in detailStore.images.goodDetail" :key="item.goodsid">
        <span class="span">{{ item.gprice }}币</span>
        <del>300币</del>
      </p>
      <div>
        <p>距离抢购结束</p>
        <van-count-down :time="time" class="count" />
      </div>
      <div class="server">
        <p>服务详情</p>
        <p>
          <span>服务</span>
          <span>24小时内送货.15天退货</span>
        </p>
        <p>
          <span>说明</span>
          <span>假一赔十17天无理由退货</span>
        </p>
        <p>
          <span>选择</span>
          <span style="color:#ff5e81" @click="showPopup" v-for="item in  detailStore.images.goodsNormsList"
            :key="item.gnid">{{ item.norms }}</span>
        </p>
      </div>
      <div class="server" id="last" v-for="item in detailStore.images.goodDetail" :key="item.goodsid">
        <p>商品参数</p>
        <p>
          <span>件数</span>
          <span>{{ item.storecount }}</span>
        </p>
        <p>
          <span>材质</span>
          <span>{{ item.quality }}</span>
        </p>
        <p>
          <span>风格</span>
          <span>{{ item.style }}</span>
        </p>
      </div>
      <div class="server" id="server">
        <p>商品详情</p>
        <img v-for="item in detailStore.images.goodsDetailList" :key="item.goodsid" :src="item.photo" alt class="img" />
      </div>
      <div class="guess">
        <Guess></Guess>
      </div>
    </div>
    <div class="bot">
      <div class="left">
        <van-icon name="cart-o" color="red" @click="showPopup2" />
        <van-icon name="star" :color="color" @click="star" />
      </div>
      <div class="right" @click="showPopup">立即购买</div>
    </div>
  </div>
  <Chouti ref="gouwuche" text="加入购物车" @go="goAddCar"></Chouti>
  <Chouti ref="chouti" @go="go"></Chouti>
</template>
  
<script setup>
import Guess from "../../components/Store/GuessLike.vue";
import Chouti from "../../components/Store/Chouti.vue";
import Hand from "../../components/Hand.vue";
import { useDetailStore } from "../../stores/detail.js";
import { useListStore } from "../../stores/list.js";
import { addMyCollections } from "../../api/index.js";
import { ExchangeInfo } from "../../stores/ExchangeOrder.js";


// 抽屉
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showSuccessToast, showFailToast } from "vant";

// 购物车数据
import { useCarStore } from "../../stores/car.js";

const stores = ExchangeInfo()
const carStore = useCarStore();
const route = useRoute();
const router = useRouter();
const detailStore = useDetailStore();
const listStore = useListStore();

const color = ref("rgb(209, 197, 197)");
const chouti = ref(null);
const gouwuche = ref(null);
// 倒计时
const time = ref(30 * 60 * 60 * 1000);


const star = () => {
  const token = localStorage.getItem("token");
  if (!token) {
    showFailToast("收藏失败！请先登录！");
    router.push("/login");
  } else if (color.value == "rgb(209, 197, 197)") {
    color.value = "yellow";
    addMyCollections()
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
    showSuccessToast("收藏成功！");
  } else {
    color.value = "rgb(209, 197, 197)";
    showSuccessToast("取消收藏成功！");
  }
};


const showPopup = () => {
  chouti.value.open();
};

const showPopup2 = () => {
  gouwuche.value.open();
};



// 返回上一页
const fn = () => {
  router.go(-1);
};
async function goCar() {
  const token = localStorage.getItem("token");
  await carStore.getInfo(token);

  // if (carStore.list.length === 0) {
  //   isEmpty.value=true
  // }else{
  //   isEmpty.value=false
  // }
  router.push({
    path: '/Car',
    query: {
      TextTitle: "购物车",

    }
  });
}

async function goAddCar(gnidd, val) {
  const token = localStorage.getItem("token");
  carStore.addInfo(val, gnidd, token).then(() => {
    carStore.getInfo(token).then(() => {
      router.push({
        path: '/Car',
        query: {
          TextTitle: "购物车",
        }
      })
    });
  });
}
const num = ref()
const go = (gnidd, val) => {
  const token = localStorage.getItem("token");
  if (!token) {
    showFailToast("请先登录！！");
    router.push("/login");
  } else {
    num.value = val
    const info = detailStore.images.goodDetail[0]
    const arr = ref({
      gPrice: info.gprice,
      note: info.note,
      number: num.value,
    })
    stores.itemData = arr.value
    router.push({
      path: "/OrderList",
    });
  }
};

</script>
  
<style scoped>
.custom-indicator {
  position: absolute;
  right: 15px;
  bottom: 15px;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 18px;
  color: white;
  background: rgba(0, 0, 0, 0.1);
}

.contain {
  display: flex;
  flex-direction: column;
}

::-webkit-scrollbar {
  display: none;
}

.contain .top {
  width: 100vw;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  color: white;
  display: flex;
  font-size: 20px;
  justify-content: space-between;
  align-items: center;
  background: #2bcddd;
  z-index: 999;
  font-size: 5.333vw;
}

.contain .top p {
  padding: 0vw 1.333vw;
}

.contain .top p .icon {
  margin-right: 1.333vw;
}

.contain .bottom {
  flex: 1;
  overflow-y: scroll;
}

.contain .bottom .swiper img {
  width: 100%;
  height: 300px;
  margin-top: -1.333vw;
}

.contain p:nth-child(2) {
  margin-left: 6.667vw;
  line-height: 6.4vw;
}

.contain p:nth-child(3) .span {
  color: #ff5e81;
  margin-left: 6.667vw;
  margin-right: 1.067vw;
  line-height: 6.4vw;
}

.contain p:nth-child(3) del:nth-child(2) {
  color: gray;
  font-size: 1.867vw;
  line-height: 6.4vw;
}

.contain div:nth-child(4) {
  color: gray;
  font-size: 1.867vw;
  display: flex;
  margin-left: 6.667vw;
}

.contain div:nth-child(4) p {
  margin-right: 1.067vw;
  padding-bottom: 0.667vw;
  line-height: 6.4vw;
}

.contain div:nth-child(4) .count {
  color: #ff5e81;
  font-size: 1.867vw;
  line-height: 6.4vw;
}

.contain .server {
  padding: 1.333vw 1.333vw;
  /* margin-left: 1.333vw; */
  color: black;
  border-top: 1.067vw solid #ecfdfa;
  border-bottom: 1.067vw solid #ecfdfa;
}

.contain .server p:nth-child(1) {
  margin: 1.333vw;
  margin-left: 6.667vw;
  border-left: 0.667vw solid red;
  padding-left: 1.333vw;
  font-weight: bold;
}

.contain .server p {
  font-size: 1.867vw;
  margin-left: 6.667vw;
  color: black;
}

.contain .server p:nth-child(2) {
  margin-top: 2vw;
}

.contain .server p:nth-child(2),
.contain .server p:nth-child(3) {
  margin-left: 6.667vw;
}

.contain .server p:nth-child(3) {
  line-height: 6.4vw;
  padding-bottom: 1.333vw;
}

.contain .server p:nth-child(4) {
  padding-bottom: 1.333vw;
}

.contain .server p span:nth-child(1) {
  margin-right: 4vw;
}

.server>p:nth-child(1) {
  text-indent: 2vw;
}

#last {
  border-top: none;
}

#server {
  border: none;
}

#server img {
  width: 100%;
  margin-top: 20px;
}

#server h4 {
  margin-bottom: 2vw;
}

.contain .img {
  width: 100%;
}

.contain .guess {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contain .bot {
  line-height: 16vw;
  font-size: 5.333vw;
  height: 16vw;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  background: pink;
  display: flex;
  justify-content: space-between;
}

.contain .bot .left {
  width: 50vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: white;
}

.contain .bot .right {
  width: 50vw;
  display: flex;
  color: white;
  align-items: center;
  justify-content: space-around;
  background-color: #2bcddd;
}

.icon {
  font-size: 6.667vw;
}
</style>